<template>
  <main>
    <div class="banner">
      <span class="sjsj">视觉设计</span>
      <span class="wcsj"
        >让文创设计和智慧突破空间界限，给用户视觉最美的享受</span
      >
    </div>
    <div class="bg1">
      <img src="./sjsj_img/img17.png" alt="" class="img17" />
      <span class="jpzs">极品展示</span>
      <span class="ycsj"
        >约国内外1200+艺术机构，1000+原创设计品牌，收录10000+艺术作品和原创设计</span
      >
      <div class="box1">
        <img src="./sjsj_img/img1.png" alt="" class="img1" />
        <span class="ygzh">玛丽·阔思:以光作画</span>
        <span class="time1">2021/07/02-2021/09/05</span>
        <span class="lmsg">龙美术馆</span>
        <span class="p1">Ⓟ</span>
      </div>
      <div class="box2">
        <img src="./sjsj_img/img2.png" alt="" class="img2" />
        <span class="sjs">史金淞：世盖/SKY</span>
        <span class="time2">2021/06/17-2021/08/22</span>
        <span class="hmsg">昊美术馆</span>
        <span class="p2">Ⓟ</span>
      </div>
      <div class="box3">
        <img src="./sjsj_img/img3.png" alt="" class="img3" />
        <span class="kjs">空山基：大都会</span>
        <span class="time3">2021/06/17-2021/11/21</span>
        <span class="hmsg1">昊美术馆</span>
        <span class="p3">Ⓟ</span>
      </div>
      <div class="box4">
        <img src="./sjsj_img/img4.png" alt="" class="img4" />
        <span class="jsd">姜思达：爱我</span>
        <span class="time4">2021/06/11-2021/08/15</span>
        <span class="xmsg">X美术馆</span>
        <span class="p4">Ⓟ</span>
      </div>
      <div class="box5">
        <img src="./sjsj_img/img5.png" alt="" class="img5" />
        <span class="wt">王拓：空手走入历史</span>
        <span class="time5">2021/06/05-2021/09/05</span>
        <span class="ucca">UCCA尤伦斯当代艺术中心</span>
        <span class="p5">Ⓟ</span>
      </div>
      <div class="box6">
        <img src="./sjsj_img/img6.png" alt="" class="img6" />
        <span class="wdsj">我的世界——廖扬个展</span>
        <span class="time6">2021/05/28-2021/07/10</span>
        <span class="nxyshl">南希艺术画廊</span>
        <span class="p6">Ⓟ</span>
      </div>
      <div class="box7">
        <img src="./sjsj_img/img7.png" alt="" class="img7" />
        <span class="xd">「相.对」-朱書麒個展</span>
        <span class="time7">2021/05/21-2021/06/20</span>
        <span class="qyhl">青雲畵廊</span>
        <span class="p7">Ⓟ</span>
      </div>
      <div class="box8">
        <img src="./sjsj_img/img8.png" alt="" class="img8" />
        <span class="zy">赵洋：愤怒近神</span>
        <span class="time8">2021/05/21-2021/07/25</span>
        <span class="xgnhl">香阁纳画廊（上海）</span>
        <span class="p8">Ⓟ</span>
      </div>
      <div class="box9">
        <img src="./sjsj_img/img9.png" alt="" class="img9" />
        <span class="ox">偶像（子弹）</span>
        <span class="jc">简策</span>
      </div>
      <div class="box10">
        <img src="./sjsj_img/img10.png" alt="" class="img10" />
        <span class="ox1">透景画（1）</span>
        <span class="jc1">简策</span>
      </div>
      <div class="box11">
        <img src="./sjsj_img/img11.png" alt="" class="img11" />
        <span class="ox2">偶像（密探）</span>
        <span class="jc2">简策</span>
      </div>
      <div class="box12">
        <img src="./sjsj_img/img12.png" alt="" class="img12" />
        <span class="ox3">偶像（凯莉）</span>
        <span class="jc3">简策</span>
      </div>
      <div class="box13">
        <img src="./sjsj_img/img13.png" alt="" class="img13" />
        <span class="ox4">偶像（蒂芙尼）</span>
        <span class="jc4">简策</span>
      </div>
      <div class="box14">
        <img src="./sjsj_img/img14.png" alt="" class="img14" />
        <span class="ox5">化石（2）</span>
        <span class="jc5">简策</span>
      </div>
      <div class="box15">
        <img src="./sjsj_img/img15.png" alt="" class="img15" />
        <span class="ox6">葫芦妈妈</span>
        <span class="jc6">张联</span>
      </div>
      <div class="box16">
        <img src="./sjsj_img/img16.png" alt="" class="img16" />
        <span class="ox7">日和夜</span>
        <span class="jc7">夏乔伊</span>
      </div>
    </div>
    <Header></Header>
    <Footer></Footer>
  </main>
</template>

<script>
//引入头部组件
import Header from "@/components/Header.vue";
// 引入底部组件
import Footer from "@/components/Footer.vue";
export default {
  components: {
    Header,
    Footer,
  },
};
</script>

<style lang="scss" scoped>
.fot {
  position: absolute;
  top: 85.01vw;
}
* {
  padding: 0;
  margin: 0;
}
.banner {
  height: 593px;
  background-image: url(./sjsj_img/banner.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  .sjsj {
    min-width: 206px;
    height: 67px;
    font-size: 48px;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 230px;
    left: 361px;
    text-align: left;
  }
  .wcsj {
    min-width: 600px;
    height: 33px;
    font-size: 24px;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 321px;
    left: 361px;
  }
}
.bg1 {
  height: 2116px;
  position: relative;
  .jpzs {
    min-width: 165px;
    height: 56px;
    font-size: 40px;
    font-weight: 500;
    color: #333333;
    position: absolute;
    top: 80px;
    left: 879px;
  }
  .ycsj {
    min-width: 764px;
    height: 40px;
    font-size: 20px;
    color: #565656;
    position: absolute;
    top: 160px;
    left: 579px;
  }
  .box1 {
    min-width: 277px;
    height: 399px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 260px;
    left: 360px;
    .img1 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
      text-align: left;
    }
    .ygzh {
      min-width: 166px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .time1 {
      position: absolute;
      top: 317px;
      left: 24px;
      min-width: 165px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      text-align: left;
    }
    .lmsg {
      min-width: 66px;
      height: 22px;
      font-size: 16px;
      color: #333333;
      position: absolute;
      top: 353px;
      left: 24px;
    }
    .p1 {
      min-width: 17px;
      height: 22px;
      font-size: 16px;
      color: #565656;
      position: absolute;
      top: 353px;
      left: 235px;
    }
  }
  .box2 {
    min-width: 277px;
    height: 399px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 260px;
    left: 667px;
    .img2 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .sjs {
      min-width: 166px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .time2 {
      position: absolute;
      top: 317px;
      left: 24px;
      min-width: 165px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      text-align: left;
    }
    .hmsg {
      min-width: 66px;
      height: 22px;
      font-size: 16px;
      color: #333333;
      position: absolute;
      top: 353px;
      left: 24px;
    }
    .p2 {
      min-width: 17px;
      height: 22px;
      font-size: 16px;
      color: #565656;
      position: absolute;
      top: 353px;
      left: 235px;
    }
  }
  .box3 {
    min-width: 277px;
    height: 399px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 260px;
    left: 974px;
    .img3 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .kjs {
      min-width: 166px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .time3 {
      position: absolute;
      top: 317px;
      left: 24px;
      min-width: 165px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      text-align: left;
    }
    .hmsg1 {
      min-width: 66px;
      height: 22px;
      font-size: 16px;
      color: #333333;
      position: absolute;
      top: 353px;
      left: 24px;
    }
    .p3 {
      min-width: 17px;
      height: 22px;
      font-size: 16px;
      color: #565656;
      position: absolute;
      top: 353px;
      left: 235px;
    }
  }
  .box4 {
    min-width: 277px;
    height: 399px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 260px;
    left: 1281px;
    .img4 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .jsd {
      min-width: 166px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .time4 {
      position: absolute;
      top: 317px;
      left: 24px;
      min-width: 165px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      text-align: left;
    }
    .xmsg {
      min-width: 66px;
      height: 22px;
      font-size: 16px;
      color: #333333;
      position: absolute;
      top: 353px;
      left: 24px;
    }
    .p4 {
      min-width: 17px;
      height: 22px;
      font-size: 16px;
      color: #565656;
      position: absolute;
      top: 353px;
      left: 235px;
    }
  }
  .box5 {
    min-width: 277px;
    height: 399px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 689px;
    left: 360px;
    .img5 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .wt {
      min-width: 166px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .time5 {
      position: absolute;
      top: 317px;
      left: 24px;
      min-width: 165px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      text-align: left;
    }
    .ucca {
      min-width: 66px;
      height: 22px;
      font-size: 16px;
      color: #333333;
      position: absolute;
      top: 353px;
      left: 24px;
    }
    .p5 {
      min-width: 17px;
      height: 22px;
      font-size: 16px;
      color: #565656;
      position: absolute;
      top: 353px;
      left: 235px;
    }
  }
  .box6 {
    min-width: 277px;
    height: 399px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 689px;
    left: 667px;
    .img6 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .wdsj {
      min-width: 166px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .time6 {
      position: absolute;
      top: 317px;
      left: 24px;
      min-width: 165px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      text-align: left;
    }
    .nxyshl {
      min-width: 66px;
      height: 22px;
      font-size: 16px;
      color: #333333;
      position: absolute;
      top: 353px;
      left: 24px;
    }
    .p6 {
      min-width: 17px;
      height: 22px;
      font-size: 16px;
      color: #565656;
      position: absolute;
      top: 353px;
      left: 235px;
    }
  }
  .box7 {
    min-width: 277px;
    height: 399px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 689px;
    left: 974px;
    .img7 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .xd {
      min-width: 166px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .time7 {
      position: absolute;
      top: 317px;
      left: 24px;
      min-width: 165px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      text-align: left;
    }
    .qyhl {
      min-width: 66px;
      height: 22px;
      font-size: 16px;
      color: #333333;
      position: absolute;
      top: 353px;
      left: 24px;
    }
    .p7 {
      min-width: 17px;
      height: 22px;
      font-size: 16px;
      color: #565656;
      position: absolute;
      top: 353px;
      left: 235px;
    }
  }
  .box8 {
    min-width: 277px;
    height: 399px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 689px;
    left: 1281px;
    .img8 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .zy {
      min-width: 166px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .time8 {
      position: absolute;
      top: 317px;
      left: 24px;
      min-width: 165px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      text-align: left;
    }
    .xgnhl {
      min-width: 66px;
      height: 22px;
      font-size: 16px;
      color: #333333;
      position: absolute;
      top: 353px;
      left: 24px;
    }
    .p8 {
      min-width: 17px;
      height: 22px;
      font-size: 16px;
      color: #565656;
      position: absolute;
      top: 353px;
      left: 235px;
    }
  }
  .box9 {
    min-width: 277px;
    height: 360px;
    position: absolute;
    top: 1118px;
    left: 360px;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    .img9 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .ox {
      min-width: 113px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .jc {
      min-width: 28px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      position: absolute;
      top: 317px;
      left: 24px;
      text-align: left;
    }
  }
  .box10 {
    min-width: 277px;
    height: 360px;
    position: absolute;
    top: 1118px;
    left: 667px;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    .img10 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .ox1 {
      min-width: 113px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .jc1 {
      min-width: 28px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      position: absolute;
      top: 317px;
      left: 24px;
      text-align: left;
    }
  }
  .box11 {
    min-width: 277px;
    height: 360px;
    position: absolute;
    top: 1118px;
    left: 974px;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    .img11 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .ox2 {
      min-width: 113px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .jc2 {
      min-width: 28px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      position: absolute;
      top: 317px;
      left: 24px;
      text-align: left;
    }
  }
  .box12 {
    min-width: 277px;
    height: 360px;
    position: absolute;
    top: 1118px;
    left: 1281px;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    .img12 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .ox3 {
      min-width: 113px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .jc3 {
      min-width: 28px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      position: absolute;
      top: 317px;
      left: 24px;
      text-align: left;
    }
  }
  .box13 {
    min-width: 277px;
    height: 360px;
    position: absolute;
    top: 1508px;
    left: 360px;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    .img13 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .ox4 {
      min-width: 113px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .jc4 {
      min-width: 28px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      position: absolute;
      top: 317px;
      left: 24px;
      text-align: left;
    }
  }
  .box14 {
    min-width: 277px;
    height: 360px;
    position: absolute;
    top: 1508px;
    left: 667px;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    .img14 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .ox5 {
      min-width: 113px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .jc5 {
      min-width: 28px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      position: absolute;
      top: 317px;
      left: 24px;
      text-align: left;
    }
  }
  .box15 {
    min-width: 277px;
    height: 360px;
    position: absolute;
    top: 1508px;
    left: 974px;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    .img15 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .ox6 {
      min-width: 113px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .jc6 {
      min-width: 28px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      position: absolute;
      top: 317px;
      left: 24px;
      text-align: left;
    }
  }
  .box16 {
    min-width: 277px;
    height: 360px;
    position: absolute;
    top: 1508px;
    left: 1281px;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    .img16 {
      min-width: 277px;
      height: 260px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .ox7 {
      min-width: 113px;
      height: 25px;
      font-size: 18px;
      color: #333333;
      position: absolute;
      top: 284px;
      left: 24px;
      text-align: left;
    }
    .jc7 {
      min-width: 28px;
      height: 20px;
      font-size: 14px;
      color: #999999;
      position: absolute;
      top: 317px;
      left: 24px;
      text-align: left;
    }
  }
  .img17 {
    min-width: 407px;
    min-height: 48px;
    position: absolute;
    top: 1968px;
    left: 700px;
  }
}
</style>
